<template>
  <div class="tags-container">
    <div class="app-container">
      <el-card>
        <!-- 面包屑区域 -->
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          v-if="subjects.id && subjects.name"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{
            subjects.id ? subjects.name : ''
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索栏区域 -->
        <el-row>
          <el-col :span="20">
            <!-- 搜索框 -->
            <el-col>
              <el-form
                ref="subjectFrom"
                :model="tagNS"
                label-width="80px"
                inline
              >
                <el-form-item label="标签名称">
                  <el-input
                    class="inputCol"
                    v-model="tagNS.tagName"
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select
                    v-model="tagNS.state"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option label="已启用" :value="1"> </el-option>
                    <el-option label="已禁用" :value="0"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-col class="left-fot">
                    <el-button
                      size="mini"
                      class="colInput"
                      plain
                      @click="resetInput"
                      >清除</el-button
                    >
                    <el-button
                      size="mini"
                      class="colInput"
                      type="primary"
                      @click="onSearch"
                      >搜索</el-button
                    >
                  </el-col>
                </el-form-item>
              </el-form>
            </el-col>
          </el-col>
          <el-col :span="4">
            <el-button
              class="colright"
              size="mini"
              type="success"
              icon="el-icon-edit"
              @click="addDialog = true"
              >新增学科</el-button
            >
            <el-button
              v-if="subjects.id && subjects.name"
              type="text"
              class="colright"
              icon="el-icon-back"
              @click="$router.back()"
              >返回学科</el-button
            >
          </el-col>
        </el-row>

        <!-- 消息文案 -->
        <el-alert
          :title="`数据一共 ${counts} 条`"
          :closable="false"
          type="info"
          show-icon
        >
        </el-alert>

        <!-- 表格区域 -->
        <el-table :data="tagsList" style="width: 100%">
          <el-table-column type="index" :index="indexMethod" label="序号">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template v-slot="{ row }">
              {{ row.state === 1 ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="editState(row)">{{
                row.state === 1 ? '禁用' : '启用'
              }}</el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="editTags(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="removeTag(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->

        <directorys-add
          :page="pages.page"
          :pagesize="pages.pagesize"
          :counts="counts"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-card>

      <!-- 添加标签弹框 -->
      <el-dialog
        title="新增标签"
        :visible.sync="addDialog"
        width="20%"
        @close="restDir"
      >
        <!-- 主体区域 -->
        <el-row>
          <el-col>
            <el-form
              :model="tagsForm"
              :rules="tagsFormRules"
              ref="tagsFormRef"
              label-width="80px"
              class="ruleForm"
            >
              <el-form-item
                v-if="!subjects.id && !subjects.name"
                class="elform"
                label="所属学科"
              >
                <el-select
                  v-model="tagsForm.value"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in addFrom"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="elform" label="标签名称" prop="tagName">
                <el-input
                  v-model="tagsForm.tagName"
                  placeholder="请输入标签名称"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button type="primary" @click="addTagsForm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改标签弹框 -->
      <el-dialog
        title="修改目录"
        :visible.sync="editDialogVisible"
        width="20%"
        @close="restDir"
      >
        <!-- 主体区域 -->
        <el-row>
          <el-col>
            <el-form
              :model="editTagList"
              :rules="tagsFormRules"
              ref="tagsFormRef"
              label-width="80px"
              class="ruleForm"
            >
              <el-form-item
                v-if="!subjects.id && !subjects.name"
                class="elform"
                label="所属学科"
              >
                <el-select
                  v-model="editTagList.value"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in addFrom"
                    :key="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="elform" label="目录名称" prop="tagName">
                <el-input
                  v-model="editTagList.tagName"
                  placeholder="请输入目录名称"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editTagsForm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, add, update, remove, changeState } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
import DirectorysAdd from '../components/directorys-add.vue'
import dayjs from 'dayjs'
export default {
  name: 'Tags',
  data () {
    return {
      // 标签id
      userId: '',

      // 修改的表单值
      editTagList: {
        value: '',
        tagName: ''
      },

      // 添加标签的表单值
      tagsForm: {
        tagName: '',
        value: ''
      },

      // 学科简单列表
      addFrom: [],
      tagNS: {
        // tagName: '',
        // state: null
      },
      // 请求标签数据参数
      pages: {
        page: 1,
        pagesize: 5
      },
      // 标签数据列表
      tagsList: [],
      // 标签总条数
      counts: 0,
      // 添加框的显示与隐藏
      addDialog: false,
      // 修改的弹框显示与隐藏
      editDialogVisible: false,
      // 添加验证
      tagsFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ]
      },
      // 分页空值
      inputString: ''
    }
  },
  components: {
    DirectorysAdd
  },
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },
  watch: {
    '$route.query' () {
      this.getTagsList()
    }
  },
  created () {
    this.getTagsList()
    this.getAddFrom()
  },
  methods: {
    // 请求标签列表
    async getTagsList () {
      if (this.subjects.id && this.subjects.name) {
        const { data } = await list({ ...this.pages, subjectID: +this.subjects.id })
        console.log(data)
        data.items.forEach((item) => {
          item.addDate = dayjs(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        })
        // this.pages.subjectID = this.subjects.id || null
        this.tagsList = data.items
        this.counts = data.counts
      } else {
        const { data } = await list(this.pages)
        // console.log(data)
        data.items.forEach((item) => {
          item.addDate = dayjs(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        })
        this.pages.subjectID = this.subjects.id || null
        this.tagsList = data.items
        this.counts = data.counts
      }
    },
    // 搜索
    onSearch () {
      this.pages = {
        ...this.pages,
        ...this.tagNS
      }
      this.getTagsList()
      this.pages.page = 1
    },
    // 点击确定修改`
    async editTagsForm () {
      if (this.subjects.id && this.subjects.name) {
        await update({
          id: this.userId,
          subjectID: +this.subjects.id,
          tagName: this.editTagList.tagName
        })
        this.$message.success('修改目录成功')
        this.editDialogVisible = false
        this.getTagsList()
      } else {
        await update({
          id: this.userId,
          subjectID: this.editTagList.value,
          tagName: this.editTagList.tagName
        })
        this.$message.success('修改目录成功')
        this.editDialogVisible = false
        this.getTagsList()
      }
    },

    // 修改
    editTags (row) {
      // console.log(row)
      this.editTagList.value = row.subjectID
      this.userId = row.id
      this.editTagList.tagName = row.tagName
      this.editDialogVisible = true
    },

    // 删除标签
    async removeTag (row) {
      // console.log(row)
      try {
        await this.$confirm('确定要删除吗', '提示')
        await remove(row)
        // console.log(data)
        if (this.tagsList.length === 1 && this.pages.page > 1) {
          this.pages.page--
        }
        this.$message.success('删除成功!')
        this.getTagsList()
      } catch (e) {
        // this.$message.error('删除失败!')
      }
    },

    // 添加操作
    async addTagsForm () {
      try {
        if (this.subjects.id && this.subjects.name) {
          await add({
            subjectID: +this.subjects.id,
            tagName: this.tagsForm.tagName
          })
          this.$message.success('新增目录成功')
          this.addDialog = false
          this.getTagsList()
        } else {
          await add({
            subjectID: this.tagsForm.value,
            tagName: this.tagsForm.tagName
          })
          this.$message.success('新增目录成功')
          this.addDialog = false
          this.getTagsList()
        }
      } catch (e) {
        this.$message.error('新增目录失败')
        console.log(e)
      }
    },

    // 添加重置
    restDir () {
      this.$refs.tagsFormRef.resetFields()
      this.tagsForm.value = ''
    },

    // 获取学科简单列表
    async getAddFrom () {
      try {
        const { data } = await simple()
        this.addFrom = data
      } catch (e) {
        console.log(e)
      }
    },

    // 清除输入框
    resetInput () {
      this.tagNS.tagName = ''
      this.tagNS.state = null
      this.onSearch()
    },

    // 修改状态
    async editState (row) {
      // console.log(row)
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误!')
      }
    },

    // 一页多少条
    handleSizeChange (newSize) {
      this.pages.pagesize = newSize
      this.pages.page = 1
      this.getTagsList()
    },

    // 多少页
    handleCurrentChange (newPage) {
      this.pages.page = newPage
      // if (!this.inputString) {
      this.getTagsList()
      // this.pages.page = 1
    },

    // 分页序号
    indexMethod (index) {
      return (this.pages.page - 1) * this.pages.pagesize + index + 1
    }
  }
}
</script>

<style scoped lang="scss">
.left-fot {
  margin-left: 9px;
}
.el-row {
  margin-top: 20px;
}
.colInput {
  height: 35px;
}
.colright {
  float: right;
  height: 35px;
  margin-left: 10px;
}
.el-breadcrumb {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.inputCol {
  width: 200px;
}
.el-form-item {
  display: inline-block;
}
.el-table {
  margin-top: 10px;
}
.el-pagination {
  float: right;
  margin-top: 20px;
}
.elform {
  width: 100%;
}

.el-form-item__content {
  margin-left: 10px;
}
</style>
